<template>
  <div class="smart-match-result">
    <!-- 算法选择器 -->
    <div class="algorithm-selector">
      <el-select v-model="selectedAlgorithm" placeholder="选择匹配算法" @change="onAlgorithmChange" class="form-item-width">
        <el-option
          v-for="algorithm in algorithms"
          :key="algorithm.value"
          :label="algorithm.label"
          :value="algorithm.value"
        />
      </el-select>
      <el-button type="primary" @click="refreshMatches">刷新</el-button>
    </div>
    
    <!-- 统计信息 -->
    <div class="statistics">
      <el-statistic title="总处理数" :value="statistics.totalProcessed" />
      <el-statistic title="已匹配" :value="statistics.matchedCount" />
      <el-statistic title="高置信度" :value="statistics.highConfidenceCount" />
      <el-statistic title="平均置信度" :value="statistics.avgConfidence" suffix="%" />
    </div>
    
    <!-- 匹配结果分组 -->
    <div class="matches-groups">
      <!-- 高置信度匹配组 -->
      <el-collapse v-model="activeGroups" accordion>
        <el-collapse-item name="high" v-if="highConfidenceMatches.length > 0">
          <template #title>
            <div class="group-title">
              <el-tag type="success" effect="dark">高置信度匹配</el-tag>
              <span class="count">({{ highConfidenceMatches.length }})</span>
            </div>
          </template>
          <div class="matches-list">
            <el-table :data="highConfidenceMatches" style="width: 100%">
              <el-table-column prop="salesOrder.platformOrderId" label="订单号" width="120" />
              <el-table-column prop="bankTransaction.payerName" label="付款方" min-width="120" />
              <el-table-column prop="salesOrder.orderAmount" label="金额" width="100" align="right">
                <template #default="{ row }">
                  {{ formatCurrency(row.salesOrder.orderAmount) }}
                </template>
              </el-table-column>
              <el-table-column prop="matchConfidence" label="置信度" width="100">
                <template #default="{ row }">
                  <el-tag type="success">{{ row.matchConfidence }}%</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="{ row }">
                  <el-button size="small" type="success" @click="applyMatch(row)">应用</el-button>
                  <el-button size="small" type="info" @click="rejectMatch(row)">拒绝</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        
        <!-- 待审核匹配组 -->
        <el-collapse-item name="review" v-if="reviewMatches.length > 0">
          <template #title>
            <div class="group-title">
              <el-tag type="warning" effect="dark">待审核匹配</el-tag>
              <span class="count">({{ reviewMatches.length }})</span>
            </div>
          </template>
          <div class="matches-list">
            <el-table :data="reviewMatches" style="width: 100%">
              <el-table-column prop="salesOrder.platformOrderId" label="订单号" width="120" />
              <el-table-column prop="bankTransaction.payerName" label="付款方" min-width="120" />
              <el-table-column prop="salesOrder.orderAmount" label="金额" width="100" align="right">
                <template #default="{ row }">
                  {{ formatCurrency(row.salesOrder.orderAmount) }}
                </template>
              </el-table-column>
              <el-table-column prop="matchConfidence" label="置信度" width="100">
                <template #default="{ row }">
                  <el-tag type="warning">{{ row.matchConfidence }}%</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="{ row }">
                  <el-button size="small" type="success" @click="applyMatch(row)">应用</el-button>
                  <el-button size="small" type="info" @click="rejectMatch(row)">拒绝</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
        
        <!-- 需核对匹配组 -->
        <el-collapse-item name="low" v-if="lowConfidenceMatches.length > 0">
          <template #title>
            <div class="group-title">
              <el-tag type="danger" effect="dark">需核对匹配</el-tag>
              <span class="count">({{ lowConfidenceMatches.length }})</span>
            </div>
          </template>
          <div class="matches-list">
            <el-table :data="lowConfidenceMatches" style="width: 100%">
              <el-table-column prop="salesOrder.platformOrderId" label="订单号" width="120" />
              <el-table-column prop="bankTransaction.payerName" label="付款方" min-width="120" />
              <el-table-column prop="salesOrder.orderAmount" label="金额" width="100" align="right">
                <template #default="{ row }">
                  {{ formatCurrency(row.salesOrder.orderAmount) }}
                </template>
              </el-table-column>
              <el-table-column prop="matchConfidence" label="置信度" width="100">
                <template #default="{ row }">
                  <el-tag type="danger">{{ row.matchConfidence }}%</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150">
                <template #default="{ row }">
                  <el-button size="small" type="success" @click="applyMatch(row)">应用</el-button>
                  <el-button size="small" type="info" @click="rejectMatch(row)">拒绝</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    
    <!-- 批量操作 -->
    <div class="batch-actions">
      <el-button type="success" @click="applyAllHighConfidence" :disabled="highConfidenceMatches.length === 0">
        全选高置信度匹配
      </el-button>
      <el-button type="primary" @click="applyAll" :disabled="allMatches.length === 0">
        一键确认所有推荐
      </el-button>
      <el-button @click="rejectAll">全部拒绝</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { MatchResult } from '@/types/reconciliation';

interface Props {
  results: MatchResult[];
}

interface Emits {
  (e: 'apply-matches', matches: MatchResult[]): void;
  (e: 'reject-match', match: MatchResult): void;
  (e: 'refresh', algorithm: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 响应式数据
const selectedAlgorithm = ref('comprehensive');
const activeGroups = ref(['high']);
const statistics = ref({
  totalProcessed: 150,
  matchedCount: 45,
  highConfidenceCount: 30,
  avgConfidence: 72.8,
  processingTime: '125ms'
});

// 算法选项
const algorithms = [
  { value: 'comprehensive', label: '综合算法' },
  { value: 'exact', label: '精确匹配' },
  { value: 'amount_first', label: '金额优先' },
  { value: 'time_window', label: '时间窗口' }
];

// 计算属性
const allMatches = computed(() => props.results || []);

const highConfidenceMatches = computed(() => {
  return allMatches.value.filter(match => match.matchConfidence >= 80);
});

const reviewMatches = computed(() => {
  return allMatches.value.filter(match => match.matchConfidence >= 50 && match.matchConfidence < 80);
});

const lowConfidenceMatches = computed(() => {
  return allMatches.value.filter(match => match.matchConfidence < 50);
});

// 方法
const formatCurrency = (amount: number) => {
  return amount.toFixed(2);
};

const applyMatch = (match: MatchResult) => {
  emit('apply-matches', [match]);
};

const rejectMatch = (match: MatchResult) => {
  emit('reject-match', match);
};

const applyAll = () => {
  emit('apply-matches', allMatches.value);
};

const applyAllHighConfidence = () => {
  emit('apply-matches', highConfidenceMatches.value);
};

const rejectAll = () => {
  // 实现拒绝所有逻辑
  console.log('拒绝所有匹配');
};

const onAlgorithmChange = (algorithm: string) => {
  emit('refresh', algorithm);
};

const refreshMatches = () => {
  emit('refresh', selectedAlgorithm.value);
};
</script>

<style scoped>
.smart-match-result {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.algorithm-selector {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding: 0 20px;
}

.statistics {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 0 20px;
}

.matches-groups {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.group-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.count {
  color: #999;
  font-size: 14px;
}

.matches-list {
  padding: 10px 0;
}

.batch-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #eee;
}

/* 折叠面板动画 */
:deep(.el-collapse-item__wrap) {
  transition: height 0.3s ease;
}
</style>